<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<link rel="shortcut icon" href="./favicon.ico" />
		<link rel="stylesheet" href="./css/common.css" />
		<link rel="stylesheet" href="./css/register.css" />
		<link
			rel="stylesheet"
			href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"
		/>
	</head>

	<body>
		<!-- 项部导航 -->
		<div class="xtx_topnav">
			<div class="wrapper">
				<!-- 顶部导航 -->
				<ul class="xtx_navs">
					<li>
						<a href="./login.html">请先登录</a>
					</li>
					<li>
						<a href="./register.html">免费注册</a>
					</li>
					<li>
						<a href="./center-order.html">我的订单</a>
					</li>
					<li>
						<a href="./center.html">会员中心</a>
					</li>
					<li>
						<a href="javascript:;">帮助中心</a>
					</li>
					<li>
						<a href="javascript:;">在线客服</a>
					</li>
					<li>
						<a href="javascript:;">
							<i class="mobile sprites"></i>
							手机版
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 头部 -->
		<div class="xtx_header">
			<div class="wrapper">
				<!-- 网站Logo -->
				<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
				<!-- 主导航 -->
				<div class="xtx_navs">
					<ul class="clearfix">
						<li>
							<a href="./index.html">首页</a>
						</li>
						<li>
							<a href="./category01.html">生鲜</a>
						</li>
						<li>
							<a href="./category01.html">美食</a>
						</li>
						<li>
							<a href="./category01.html">餐厨</a>
						</li>
						<li>
							<a href="./category01.html">电器</a>
						</li>
						<li>
							<a href="./category01.html">居家</a>
						</li>
						<li>
							<a href="./category01.html">洗护</a>
						</li>
						<li>
							<a href="./category01.html">孕婴</a>
						</li>
						<li>
							<a href="./category01.html">服装</a>
						</li>
					</ul>
				</div>
				<!-- 站内搜索 -->
				<div class="xtx_search clearfix">
					<!-- 购物车 -->
					<a href="./cart-none.html" class="xtx_search_cart sprites">
						<i>2</i>
					</a>
					<!-- 搜索框 -->
					<div class="xtx_search_wrapper">
						<input
							type="text"
							placeholder="搜一搜"
							onclick="location.href='./search.html'"
						/>
					</div>
				</div>
			</div>
		</div>
		<div class="xtx-wrapper">
			<div class="container">
				<!-- 卡片 -->
				<div class="xtx-card">
					<h3>新用户注册</h3>
					<form class="xtx-form">
						<div data-prop="username" class="xtx-form-item">
							<span class="iconfont icon-zhanghao"></span>
							<input
								name="username"
								type="text"
								placeholder="设置用户名称"
							/>
							<span class="msg"></span>
						</div>
						<div data-prop="phone" class="xtx-form-item">
							<span class="iconfont icon-shouji"></span>
							<input
								name="phone"
								type="text"
								placeholder="输入手机号码  "
							/>
							<span class="msg"></span>
						</div>
						<div data-prop="code" class="xtx-form-item">
							<span
								class="iconfont icon-zhibiaozhushibiaozhu"
							></span>
							<input
								name="code"
								type="text"
								placeholder="短信验证码"
							/>
							<span class="msg"></span>
							<a class="code" href="javascript:;">发送验证码</a>
						</div>
						<div data-prop="password" class="xtx-form-item">
							<span class="iconfont icon-suo"></span>
							<input
								name="password"
								type="password"
								placeholder="设置6至20位字母、数字和符号组合"
							/>
							<span class="msg"></span>
						</div>
						<div data-prop="confirm" class="xtx-form-item">
							<span class="iconfont icon-suo"></span>
							<input
								name="confirm"
								type="password"
								placeholder="请再次输入上面密码"
							/>
							<span class="msg"></span>
						</div>
						<div class="xtx-form-item pl50">
							<i class="iconfont icon-queren"></i>
							<!-- icon-queren2 -->
							已阅读并同意<i>《用户服务协议》</i>
						</div>
						<div class="xtx-form-item">
							<button class="submit">下一步</button>
							<!-- <a class="submit" href="javascript:;">下一步</a> -->
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- 公共底部 -->
		<div class="xtx_footer clearfix">
			<div class="wrapper">
				<!-- 联系我们 -->
				<div class="contact clearfix">
					<dl>
						<dt>客户服务</dt>
						<dd class="chat">在线客服</dd>
						<dd class="feedback">问题反馈</dd>
					</dl>
					<dl>
						<dt>关注我们</dt>
						<dd class="weixin">公众号</dd>
						<dd class="weibo">微博</dd>
					</dl>
					<dl>
						<dt>下载APP</dt>
						<dd class="qrcode">
							<img src="./uploads/qrcode.jpg" />
						</dd>
						<dd class="download">
							<span>扫描二维码</span>
							<span>立马下载APP</span>
							<a href="javascript:;">下载页面</a>
						</dd>
					</dl>
					<dl>
						<dt>服务热线</dt>
						<dd class="hotline">
							400-0000-000
							<small>周一至周日 8:00-18:00</small>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 其它 -->
			<div class="extra">
				<div class="wrapper">
					<!-- 口号 -->
					<div class="slogan">
						<a href="javascript:;" class="price">价格亲民</a>
						<a href="javascript:;" class="express">物流快捷</a>
						<a href="javascript:;" class="quality">品质新鲜</a>
					</div>
					<!-- 版权信息 -->
					<div class="copyright">
						<p>
							<a href="javascript:;">关于我们</a>
							<a href="javascript:;">帮助中心</a>
							<a href="javascript:;">售后服务</a>
							<a href="javascript:;">配送与验收</a>
							<a href="javascript:;">商务合作</a>
							<a href="javascript:;">搜索推荐</a>
							<a href="javascript:;">友情链接</a>
						</p>
						<p>CopyRight &copy; 小兔鲜儿</p>
					</div>
				</div>
			</div>
		</div>
		<script>
			// 获取元素
			const form = document.querySelector("form");
			const passwordInput = document.querySelector(
				"input[name='password']"
			);
			const code = document.querySelector("a.code");
			const queren = document.querySelector(".icon-queren");

			// 正则匹配
			const numberOnlyRegex = /^\d+$/; // 电话号码 (仅支持数字)
			const usernameRegex = /^[a-zA-Z0-9]+$/; // 用户名(仅支持英文和数字)
			const passwordRegex = /^[a-zA-Z0-9!@#$%^&*()]+$/; // 密码 (仅支持英文和数字及 "!@#$%^&*()" 符号)

			// 若未勾选协议则不可进行后续操作
			queren.addEventListener("click", () => {
				queren.classList.toggle("icon-queren2");
			});

			form.addEventListener("submit", (e) => {
				if (!queren.classList.contains("icon-queren2")) {
					e.preventDefault();
					alert("请先勾选协议");
				}
			});

			// 事件委托
			form.addEventListener("change", (e) => {
				if (e.target.nodeName === "INPUT") {
					switch (e.target.name) {
						case "username":
							if (!checkTextLength(e.target, 0, 20)) return;
							checkTextByRegex(
								e.target,
								usernameRegex,
								"用户名仅支持英文和数字"
							);
							break;
						case "phone":
							if (!checkTextLength(e.target, 0, 11)) return;
							checkTextByRegex(
								e.target,
								numberOnlyRegex,
								"请输入正确的电话号码"
							);
							break;
						case "code":
							if (!checkTextLength(e.target, 0, 6)) return;
							checkTextByRegex(
								e.target,
								numberOnlyRegex,
								"请输入正确的验证码"
							);
							break;
						case "password":
							if (!checkTextLength(e.target, 6, 20)) return;
							checkTextByRegex(
								e.target,
								passwordRegex,
								"密码由字母、数字和符号组合!"
							);
							break;
						case "confirm":
							if (e.target.value !== passwordInput.value) {
								e.target.nextElementSibling.innerHTML =
									"两次密码不一致!";
							} else {
								e.target.nextElementSibling.innerHTML = "";
							}
							break;
					}
				}
			});

			// 发送验证码倒计时
			let countdown = 5;
			let codeInterval;
			code.addEventListener("click", () => {
				code.style.pointerEvents = "none";
				sendCode();
				codeInterval = setInterval(sendCode, 1000);
			});

			function sendCode() {
				if (countdown === 0) {
					code.innerHTML = `发送验证码`;
					countdown = 5;
					code.style.pointerEvents = "auto";
					clearInterval(codeInterval);
					return;
				}
				code.innerHTML = `再次发送(${countdown})`;
				countdown--;
			}

			function checkTextLength(target, minL, maxL) {
				if (
					target.value.trim().length >= minL &&
					target.value.trim().length <= maxL
				) {
					target.nextElementSibling.innerHTML = "";
					return true;
				} else {
					target.nextElementSibling.innerHTML =
						minL > 0
							? `内容长度在${minL}-${maxL}之间!`
							: `内容长度最大不超过${maxL}`;
					return false;
				}
			}

			function checkTextByRegex(target, regex, warn) {
				if (!regex.test(target.value)) {
					target.nextElementSibling.innerHTML = warn;
				} else {
					target.nextElementSibling.innerHTML = "";
				}
			}
		</script>
	</body>
</html>
